<template>
    <el-menu
      :default-active="$route.path"
      :router="true"
      :collapse="isCollapse"
      background-color="#fff"
      text-color="black"
      active-text-color="#d16053"
      :collapse-transition="false"
      style="min-height: calc(100vh - 60px)"
    >
      <el-menu-item v-for="item in menulist" :index="item.path" :key="item.path">
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span style="font-size: large">{{ item.label }}</span>
      </el-menu-item>
    </el-menu>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useAllDataStore } from '@/stores/index'
import { House, EditPen, Message, FolderChecked, Document,ZoomOut, Delete } from '@element-plus/icons-vue'

const menulist = ref([
  { path: '/home', name: 'home', label: '邮箱首页', icon: House },
  { path: '/compose', name: 'compose', label: '写邮件', icon: EditPen },
  { path: '/sent', name: 'sent', label: '已发送', icon: Message },
  { path: '/inbox', name: 'inbox', label: '收件箱', icon: FolderChecked },
  { path: '/draft', name: 'draft', label: '草稿箱', icon: Document },
  { path: '/spam', name: 'spam', label: '垃圾箱', icon: ZoomOut },
  { path: '/deleted', name: 'deleted', label: '已删除', icon: Delete },
])

const store = useAllDataStore()
const isCollapse = computed(() => store.state.isCollapse)
</script>

<style scoped>
.el-menu-item:hover {
  background-color: #f9e9e7 !important;
}
.el-menu-item.is-active {
  background-color: #f9e9e7 !important;
}
.el-menu {
  height: 100%;
}
.main-aside {
  background: #f5f7fa;
  border-right: 1px solid #ebeef5;
  min-height: 100vh;
  padding-top: 10px; /* 可以改为0试试 */
  margin: 0 !important;
  padding: 0 !important;
}
</style>
